<template>
  <div>
    <el-dialog
      class="afterInvest-add-open custom-dialog"
      width="60%"
      :visible.sync="visible"
      @close="closeHandle"
      :append-to-body="appendToBody"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" class="title">
        {{ title }}
      </div>
      <el-form
        ref="dataForm"
        :inline="true"
        label-width="80px"
        :model="dataForm"
      >
        <el-form-item label="" prop="investName">
          <el-input
            v-model="dataForm.investName"
            size="small"
            clearable
            placeholder="请输入投资名称"
            style="width: 200px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="investStatus">
          <el-select
            size="small"
            v-model="dataForm.investType"
            placeholder="请选择投资形式"
            style="width: 200px;"
            clearable
          >
            <el-option
              v-for="item in invesTypeOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled"
            >
              {{ item.label }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px;">
          <el-button size="small" class="bg-green" @click="getList">
            查询
          </el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="filex">
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          stripe
          fit
          size="mini"
          @row-click="submitHandle"
          @sort-change="sortChange"
          :header-cell-style="{ color: '#333' }"
          style="width: 100%;"
        >
          <el-table-column
            v-if="type === 'id'"
            prop="investId"
            label="编号"
            align="left"
            width="78"
            fixed
            sortable="custom"
          ></el-table-column>
          <el-table-column
            v-else
            type="index"
            label=""
            align="center"
            width="50"
            fixed
          >
            <template slot-scope="scope">
              <span v-if="type === 'id'">{{ scope.$index }}</span>
              <el-radio
                v-else-if="type === 'radio'"
                v-model="radio"
                :label="scope.row.investId"
              >
                {{ '' }}
              </el-radio>
              <el-checkbox
                v-else
                v-model="checkArr"
                :label="scope.row.investId"
              >
                {{ '' }}
              </el-checkbox>
              <div class="checkhidden"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="investName"
            sortable="custom"
            label="投资名称"
            min-width="150"
            fixed
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <!-- <span
              v-if="row.hasNetWorth"
              style="margin-left: 10px; cursor: pointer; color: #1890ff;"
              @click.stop="groupDeltailHandle(row.investId)"
            >
              {{ row.investName }}
            </span>
            <span
              v-else
              style="margin-left: 10px; cursor: pointer; color: #666;"
              @click.stop="$message('该投资分组净值不存在，无法查看详情')"
            >
            {{ row.investName }}
            </span> -->
              {{ row.investName }}
            </template>
          </el-table-column>
          <el-table-column prop="investType" label="投资形式" width="90">
            <template slot-scope="{ row }">
              <div v-for="item in invesTypeOption" :key="item.id">
                <span v-if="row.investType === item.id">
                  {{ item.label }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="unitNetworth"
            sortable="custom"
            label="单位净值"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="networthValue"
            sortable="custom"
            label="累计净值"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="currentEquity"
            sortable="custom"
            label="资产金额(万元)"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="currentShare"
            sortable="custom"
            label="资产份额(份)"
            width="140"
          ></el-table-column>
          <el-table-column
            prop="incomeRate"
            sortable="custom"
            label="收益率"
            min-width="120"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.incomeRate"
                :class="row.incomeRate >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="incomeRateToday"
            sortable="custom"
            label="当日收益率"
            min-width="120"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.incomeRateToday || row.incomeRateToday !== null"
                :class="row.incomeRateToday >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.incomeRateToday }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="incomeRateWeek"
            sortable="custom"
            label="近1周收益率"
            min-width="130"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.incomeRateWeek"
                :class="row.incomeRateWeek >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.incomeRateWeek }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="incomeRateMonth"
            sortable="custom"
            label="近1月收益率"
            min-width="130"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.incomeRateMonth"
                :class="row.incomeRateMonth >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.incomeRateMonth }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="incomeRateHalfYear"
            sortable="custom"
            label="近6月收益率"
            min-width="130"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.incomeRateHalfYear"
                :class="
                  row.incomeRateHalfYear >= 0 ? 'positiveFc' : 'negativeFc'
                "
              >
                {{ row.incomeRateHalfYear }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="incomeRateYear"
            sortable="custom"
            label="近1年收益率"
            min-width="130"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.incomeRateYear"
                :class="row.incomeRateYear >= 0 ? 'positiveFc' : 'negativeFc'"
              >
                {{ row.incomeRateYear }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="networthTime"
            label="净值日期"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="investStrategyName"
            sortable="custom"
            label="关联策略"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="investIndexText"
            sortable="custom"
            label="对标指数"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="investStarttime"
            sortable="custom"
            label="投资时间"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="{ row }">
              <el-button
                class="filter-item"
                size="mini"
                icon="el-icon-edit-outline"
                :disabled="row.addType == 1"
                @click="enternetValueHandle(row)"
              >
                录入净值
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="list" v-if="type === 'check'">
          <div class="list-title">
            <span>已勾选</span>
            <span>({{ checkList.length }})</span>
          </div>
          <div style="height: 468px; overflow-y: scroll;">
            <div
              class="list-item"
              v-for="(item, index) in checkList"
              :key="index"
            >
              <span class="list-item-content">
                {{ item.investName }}
              </span>
              <i class="el-icon-close close" @click="delList(index)"></i>
            </div>
          </div>
        </div>
      </div>

      <div>
        <el-button
          v-if="type !== 'id'"
          style="float: right; margin-top: 15px; width: 160px; font-size: 12px;"
          type="primary"
          size="small"
          @click="submitCheck()"
        >
          确认
        </el-button>
        <pagination
          style="text-algin: left;"
          v-show="total > 0"
          :total="total"
          :layout="'total, sizes, prev, pager, next'"
          :page.sync="listQuery.pageCurrent"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </div>
    </el-dialog>
    <enternetValueOpen
      ref="enternetValueOpen"
      v-if="hasEnternetValueOpen"
      @closeOpen="getList"
    ></enternetValueOpen>
  </div>
</template>

<script>
import { queryInvestInfoByPage } from '@/api/afterInvest'
import Pagination from '@/components/Pagination'
import { rmoney } from '@/utils'
import { INVESTTYPE_OPTIONS } from '@/views/afterManage/const'
import { STATUS_OPTIONS } from '../const'
import enternetValueOpen from '@/views/afterManage/component/enternetValueOpen.vue'

export default {
  props: {
    userId: String | Number,
    title: { type: String, default: '更改策略（单选）' },
    type: { type: String, default: 'id' },
    nolink: {
      type: Boolean,
      default: false,
    },
    appendToBody: {
      type: Boolean,
      default: false,
    },
  },
  components: { Pagination, enternetValueOpen },
  data() {
    return {
      rmoney: rmoney,
      noInvestName: false,
      visible: false,
      listLoading: false,
      total: 0,
      listQuery: {
        pageCurrent: 1,
        limit: 20,
      },
      dataForm: {
        investName: '',
        strategyName: '',
        investType: '',
      },
      list: [],
      checkList: [],
      radioList: [],
      radio: '',
      checkArr: [],
      hasEnternetValueOpen: false,
      invesTypeOption: INVESTTYPE_OPTIONS,
      statusList: STATUS_OPTIONS,
    }
  },
  methods: {
    sortChange() {},
    tableRowClassName({ row, rowIndex }) {
      return 'list-row'
    },
    closeHandle() {
      this.visible = false
    },
    // 初始化
    init() {
      this.radio = ''
      this.visible = true
      this.checkArr = []
      this.checkList = []
      this.listQuery = {
        pageCurrent: 1,
        limit: 20,
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.$refs.table.clearSelection()
        this.getList()
      })
    },
    searchList() {
      this.listQuery.pageCurrent = 1
      this.getList()
    },
    // 策略列表
    getList() {
      return new Promise((resolve) => {
        this.listLoading = true
        queryInvestInfoByPage({
          userId: this.userId,
          ...this.dataForm,
          ...this.listQuery,
          investManageType: 1, // 1投资 2子投资
        }).then((res) => {
          this.listLoading = false
          // this.list = res.body.map((items, index) => {
          //   items.id = index;
          //   return items;
          // });
          this.list = res.body.list
          console.log('投资列表', this.list)
          this.total = res.body.total || 0
          resolve(true)
        })
      })
    },
    resetForm() {
      this.$refs['dataForm'].resetFields()
      this.getList()
    },
    // 单选双击选中
    dblclickHandle(row) {
      if (this.type !== 'check') {
        this.$emit('selctInvestName', row)
        this.visible = false
      }
    },
    // 行选中
    submitHandle(row, col) {
      // if (this.allStrategyType == 0) {
      // if (!row.hasNetworth) {
      //   this.$message({
      //     message: '该产品净值不存在或者少于2条',
      //     warning: 'warning',
      //   })
      //   return
      // }
      // }
      if (this.type === 'id') {
        this.$emit('selctInvestName', row)
        this.visible = false
      } else if (this.type === 'radio') {
        this.radio = row.investId
        this.radioList = row
      } else if (this.type === 'check') {
        if (this.checkArr.indexOf(row.investId) === -1) {
          this.checkArr.push(row.investId)
          this.checkList.push(row)
        } else {
          for (var i = 0; i < this.checkArr.length; i++) {
            if (this.checkArr[i] === row.investId) {
              this.checkArr.splice(i, 1)
              this.checkList.splice(i, 1)
            }
          }
        }
      }
    },
    delList(i) {
      this.checkArr.splice(i, 1)
      this.checkList.splice(i, 1)
    },
    // 多选
    handleSelectionChange(rows) {
      this.checkList = rows.map((item) => {
        return item
      })
    },
    // 录入净值
    enternetValueHandle(row) {
      this.hasEnternetValueOpen = true
      this.$nextTick(() => {
        this.$refs.enternetValueOpen.init({
          investName: null,
          strategyId: row.investId,
          strategyName: row.investName,
          userId: this.userId,
          networth: row.unitNetworth,
          networthTime: row.networthTime,
          strategyNetWorthStyle: 0,
        })
      })
    },
    // 确认
    submitCheck() {
      if (this.type === 'radio' && this.radioList.investId !== undefined) {
        // console.log('投资列表弹窗', this.radioList)
        this.$emit('selctSubInvestName', this.radioList)
        this.visible = false
      } else if (this.type === 'check' && this.checkList.length > 0) {
        console.log('投资列表弹窗', this.checkList)
        this.$emit('selCheckctSubInvestName', this.checkList)
        this.visible = false
      } else {
        this.$message({
          message: '请选择策略',
          type: 'info',
          duration: 2 * 1000,
        })
      }
    },
  },
}
</script>
<style lang="scss">
.list-row {
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
.afterInvest-add-open {
  ::v-deep .el-dialog__body {
    min-height: 600px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  ::v-deep .pagination-container {
    padding: 15px 0;
    text-align: left;
  }
  .title {
    line-height: 53px;
    background: #d4dfef;
    padding-left: 20px;
    color: #333333;
    font-weight: bold;
    font-size: 18px;
  }
  .title2 {
    margin-top: 15px;
  }
  .head {
    border: 1px solid #ddd;
    ::v-deep .el-form {
      margin-top: 15px;
    }
  }
  .filex {
    display: flex;
    justify-content: space-between;
    .list {
      margin-left: 15px;
      width: 280px;
      min-height: 200px;

      &-title {
        background: #f5f7fa;
        color: #333;
        font-weight: bold;
        height: 47px;
        padding-left: 16px;
        line-height: 36px;
      }
      &-item {
        background: #f5f7fa;
        margin-top: 10px;
        font-size: 14px;
        padding-left: 10px;
        line-height: 30px;
        &:hover {
          color: #1890ff;
        }
        &-content {
          width: 210px;
          display: inline-block;
        }
      }
      .close {
        padding: 0 10px;
        line-height: 30px;
        cursor: pointer;
      }
    }
  }
  .table-content {
    border: 1px solid #ddd;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    // margin-top: 15px;
  }
  .checkhidden {
    display: inline-block;
    width: 80px;
    height: 34px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
  }
  ::v-deep .el-table__fixed {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
  ::v-deep .el-table__fixed-right {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
}
</style>
